<template>
  <div ref="containerRef" class="container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  AxesHelper,
  BoxGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  PlaneGeometry,
  Scene,
  SphereGeometry,
  WebGLRenderer
} from 'three'

const containerRef = ref<HTMLDivElement>()
const scene = new Scene()

// 创建摄像机
const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000)
// 设置摄像机位置
camera.position.set(-30, 40, 30)
// 设置摄像机朝向
camera.lookAt(scene.position)

// 渲染舞台
const renderer = new WebGLRenderer()
renderer.setClearColor(new Color(0xeeeeee))
renderer.setSize(window.innerWidth, innerHeight)

const axes = new AxesHelper(20)
scene.add(axes)

// 设置平面  width  height
const planeGeometry = new PlaneGeometry(60, 20)
// 设置平面的材质
const mashBasicMaterial = new MeshBasicMaterial({ color: 0xcccccc })
const plane = new Mesh(planeGeometry, mashBasicMaterial)

// x轴旋转 -180°
plane.rotation.x = -0.5 * Math.PI
plane.position.x = 10

scene.add(plane)

// 设置正方体  width  height  length
const cubeGeometry = new BoxGeometry(4, 4, 4)
// wireframe  是否是线框
const cubeMaterial = new MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const cube = new Mesh(cubeGeometry, cubeMaterial)
// x  y  z  的偏移量
cube.position.set(2, 2, 2)
scene.add(cube)

// 设置球体  radius(半径)
const sphereGeometry = new SphereGeometry(4)
const sphereMaterial = new MeshBasicMaterial({ color: 0x7777ff, wireframe: true })

const sphere = new Mesh(sphereGeometry, sphereMaterial)

sphere.position.x = 20
sphere.position.y = 4
sphere.position.z = 2

scene.add(sphere)

onMounted(() => {
  containerRef.value?.appendChild(renderer.domElement)
  renderer.render(scene, camera) // 挂载场景和相机
})
</script>

<style lang="" scoped></style>
